<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/web/commons/global.jsp"%>
<div>
	<div class="videos-wrapper">
		<c:forEach items="${videos}" varStatus="videoStatus_top">
			<c:if test="${videoStatus_top.index % 4 == 0 }">
				<div class="videos">
					<c:forEach items="${videos}" var="video"
						begin="${videoStatus_top.index / 4 * 4 }"
						end="${videoStatus_top.index / 4 * 4 +3 }">
						<div class="video">
							<div class="img-div">
								<a href="${baseUrl }/video/${video.id }.html"> <img
									class="img" src="${video.coverUrl }" />
								</a>
							</div>
							<div class="content-div">
								<div class="content-div-title">
									<a href="${baseUrl }/video/${video.id }.html">
										<h2 class="title">${video.title }</h2>
									</a>
								</div>


								<div class="desc hid">${video.info }</div>
								<div class="desc-time-split"></div>
								<div class="time">
									<div>
										<span>同源${video.countCognate }集 ${video.showTime
																	}
										</span>
									</div>
									<div>
										<c:if test="${video.statistics.countWatch > 0}">
											<span>${video.statistics.showCountWatch }</span>
										</c:if>
									</div>
									<div class="clear-both"></div>
								</div>
							</div>
						</div>
					</c:forEach>
				</div>
			</c:if>
		</c:forEach>
	</div>

	<c:if test="${not empty  pagination.items}">
		<div class="vertical-spacing-20"></div>
		<div class="video-pagination-wrapper">
			<div class="content">
				<ul class="pagination page-ul">

					<c:if test="${pagination.index > 1}">
						<li class="page-item"><a href="javascript:;"
							onclick="getVideoList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${pagination.index - 1})">&laquo;</a></li>
						<li class="page-item"><a href="javascript:;"
							onclick="getVideoList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},1)">首页</a></li>
					</c:if>

					<c:forEach begin="${pagination.index }"
						end="${pagination.index + 7}" varStatus="pageStatus">
						<c:if test="${pageStatus.index <= pagination.pages}">
							<c:choose>
								<c:when test="${pageStatus.first }">
									<li class="page-item cur-page"><a href="javascript:;">${pageStatus.index }</a></li>
								</c:when>
								<c:otherwise>
									<li class="page-item"><a href="javascript:;"
										onclick="getVideoList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${pageStatus.index })">${pageStatus.index
																	}</a></li>
								</c:otherwise>
							</c:choose>
						</c:if>
					</c:forEach>

					<c:if test="${pagination.index < pagination.pages}">
						<li class="page-item"
							onclick="getVideoList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${pagination.index + 1})"><a
							href="javascript:;">&raquo;</a></li>
						<li class="page-item"
							onclick="getVideoList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${pagination.pages} )"><a
							href="javascript:;">尾页</a></li>
					</c:if>

					<!-- 													<li class="page-item has-more"><a href="javascript:;">&hellip;</a></li> -->
				</ul>
			</div>
		</div>
	</c:if>
</div>


<script>

/**
 * 视频列表布局
 */
$(function () {
    //视频div包装对象
    var _VIDEOS_WRAPPER_ = $('.videos-wrapper');
    //视频列
    var _VIDEOS_ = _VIDEOS_WRAPPER_.find('.videos');
    //视频列个数
    var _VIDEOS_LENGTH_ = _VIDEOS_.length;
    //视频div包装对象 初始高度
    var _VIDEOS_WRAPPER_HEIGHT_ = 0;
    //视频列显示优先级
    var _VIDEOS_WRAPPER_Z_INDEX_ = 10000;
    //每个视频列间距10px
    var _VIDEOS_MARGIN_TOP_ = 10;

    //第一个视频列定义高度
    var _VIDEOS_FIRST_HEIGHT_ = 0;
    _VIDEOS_.each(function (inx, val) {
        var _this = $(val)
        if (inx == 0) {
            _VIDEOS_FIRST_HEIGHT_ = _this.height(); //初始化第一个视频列高度
        }

        if (inx == (_VIDEOS_LENGTH_ - 1)) {
            _VIDEOS_WRAPPER_HEIGHT_ = _VIDEOS_WRAPPER_HEIGHT_ + _this.height(); //增加视频div包装对象高度
        } else {
            _VIDEOS_WRAPPER_HEIGHT_ = _VIDEOS_WRAPPER_HEIGHT_ + _this.height() + _VIDEOS_MARGIN_TOP_;
        }

        _this.css('z-index', _VIDEOS_WRAPPER_Z_INDEX_--); //设置优先级
        if (inx > 0) {
            _this.css('margin-top', (_VIDEOS_FIRST_HEIGHT_ * inx + _VIDEOS_MARGIN_TOP_ * inx) + 'px'); //设置视频列间距
        }
    });
    _VIDEOS_WRAPPER_.height(_VIDEOS_WRAPPER_HEIGHT_); //视频div包装对象高度

    _VIDEOS_.find('.video').hover(function () {
        var _this = $(this);
        _this.find('.content-div .desc').show();
    }, function () {
        var _this = $(this);
        _this.find('.content-div .desc').hide();
    });
});
</script>